<template>
  <div class="container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <!-- v-model 双向数据绑定 -->
      <el-form-item label="业务类型" prop="bsName">
        <el-input
          v-model="queryParams.bsName"
          placeholder="请输入业务类型"
          clearable
          style="width: 240px"
          @keyup.enter.native="handleQuery"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>

    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['system:dict:add']"
        >新增</el-button>
      </el-col>

      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="typeList" border>
      <el-table-column label="业务类型" align="center" prop="bsName" />
      <el-table-column label="名称" align="center" prop="name" />
      <el-table-column label="联系方式" align="center" prop="contact" :show-overflow-tooltip="true" />

      <el-table-column
        prop="icon1"
        label="图标1"
        align="center">
        <template slot-scope="scope">
           <el-image
                style="width: 60px; height: 60px"
                :src="scope.row.icon1"
                :preview-src-list="[ scope.row.icon1]"
                  />
        </template>
      </el-table-column>

      <el-table-column
        prop="icon2"
        label="图标2"
        align="center">
        <template slot-scope="scope">
           <el-image
                style="width: 60px; height: 60px"
                :src="scope.row.icon2"
                :preview-src-list="[ scope.row.icon2]"
                  />
        </template>
      </el-table-column>

      <el-table-column label="语言" align="center" prop="languageLabel" />

      <!-- element UI  el-table组件怎么在点击某一行的按钮后获取某一行的实体数据 -->
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:user:edit']">修改</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['system:user:remove']">删除</el-button>
        </template>
      </el-table-column>

    </el-table>

      <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryParams.pageNum"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="queryParams.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            class="page_style">

      </el-pagination>

      <AddDialog ref="addDialog" @custom-event="getList"></AddDialog>
      <UpdateDicDialog ref="updateDialog" :form="form" @custom-event="getList"></UpdateDicDialog>

      <DeleteDialog ref="deleteDialog" :formId="formId" @delete-event="onSubmitDelete"></DeleteDialog>

  </div>
</template>

<script>

//相对路径
import AddDialog from "./components/AddDialog.vue";
import UpdateDicDialog from "./components/UpdateDicDialog.vue";
import DeleteDialog from "@/components/DeleteDialog.vue";

import { listType,deleteDic } from "@/api/system/dict2/type";

export default {

  components:{AddDialog ,UpdateDicDialog,DeleteDialog},
  data() {
    return {
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 字典表格数据
      typeList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        bsName: undefined
      },
      // 表单参数
      form: {
        id:-1,
        bsName:'',
        label:'',
        value:''
      },
      formId:-1

    };
  },
  created() {
    this.getList();
  },
  methods: {
      handleUpdate(row){
        this.$refs['updateDialog'].showDialog();
        Object.assign(this.form, row);

      },
      handleDelete(row){
        this.$refs['deleteDialog'].showDialog();
        // 根据id 删除数据
        this.formId=row.id;
      },

      handleSizeChange(val) {
            // console.log(`每页 ${val} 条`);
            this.queryParams.pageNum=1;
            this.queryParams.pageSize=val;
            this.getList();

      },
      handleCurrentChange(val) {
            // console.log(`当前页: ${val}`);
            this.queryParams.pageNum=val;
            this.getList();

      },
    /** 查询字典类型列表 */
    getList() {
      this.loading = true;
      listType(this.queryParams).then(response => {
          this.typeList = response.rows;
          this.total = response.total;
          this.loading = false;
          this.listFilterLanguage(this.typeList);


        }
      );
    },
    listFilterLanguage(data){
       data.forEach((element) =>{
            if(element.language === 'zh'){
                element.languageLabel="中文";
            }else if(element.language === 'en'){
                element.languageLabel="英语";
            }else if(element.language === 'fr'){
                element.languageLabel="法语";
            }else if(element.language === 'ja'){
                element.languageLabel="日语";
            }
       }

      );

    },

    // 表单重置
    reset() {
      this.form = {
        dictId: undefined,
        dictName: undefined,
        dictType: undefined,
        status: "0",
        remark: undefined
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      // this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 新增按钮操作 */
    handleAdd() {
      // this.reset();
      // this.open = true;
      // this.title = "添加字典类型";
      this.$refs['addDialog'].showDialog();
    },
    onSubmitDelete(data){
        deleteDic(data).then(response => {
          console.log(response);
          this.$refs['deleteDialog'].hideDialog();
          this.getList();

        });
    }

  }
};
</script>
<style scoped>
     .container{
        width: calc(100% - 40px);
        padding-left: 20px;
        padding-top: 20px;
        display: flex;
        flex-direction: column;

     }

     .page_style{
        width: auto;
        align-self: flex-end;
        margin-top: 20px;
     }

</style>
